<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息轮播</title>
    
    <style>

        .box
        {
            display: flex;
            align-items: center;
            width: 150px;
            height: 35px;
            border-radius: 20px;
            text-align: center;
            background-color: #666;
        }

        .icon
        {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            margin-right: 15px;
        }

        .title
        {
            font-size: 12px;
            color: #fff;
        }

    </style>

</head>
<body>

   <div class="box">
    <img  class="icon" src="image/小熊.jpg" alt="">
    <span class="title">用户小熊来了</span>
   </div>


   <script>
      //定义轮播列表
      userInfo = [
        {icon:"./image/小熊.jpg",title:"用户小熊来了"},
        {icon:"./image/小狮子.jpg",title:"用户小狮子来了"},
        {icon:"./image/小迪.jpg",title:"用户小迪来了"},
        {icon:"./image/蜡笔小新.jpg",title:"用户蜡笔小新来了"},
      ]
      
      //找到box
      var boxEl = document.querySelector(".box");
      //找到box下面的icon
      var boxiconEl = boxEl.querySelector(".icon");
      //找到box下面的title
      var boxtitleEl = boxEl.querySelector(".title");
      
      //记录下标
      var currentIndex = 0; 

      setInterval(function(){

        boxiconEl.src = userInfo[currentIndex].icon;
        boxtitleEl.textContent = userInfo[currentIndex].title;
        currentIndex++;
        currentIndex%=userInfo.length;

      },1000)
      
   </script>
    
</body>
</html>